<template>
    <view class="content">
        <!-- <view class="nav" v-if="isShow">
            <view class="nav-i" :class="{navActive : type == 1}" @click="chooseNav(1)">
                <view>报备</view>
                <view>（{{ count.count1 }}）</view>
            </view>
            <view class="nav-i" :class="{navActive : type == 2}" @click="chooseNav(2)">
                <view>到访</view>
                <view>（{{ count.count2 }}）</view>
            </view>
            <view class="nav-i" :class="{navActive : type == 3}" @click="chooseNav(3)">
                <view>认购</view>
                <view>（{{ count.count3 }}）</view>
            </view>
            <view class="nav-i" :class="{navActive : type == 4}" @click="chooseNav(4)">
                <view>待结佣</view>
                <view>（{{ count.count4 }}）</view>
            </view>
            <view class="nav-i" :class="{navActive : type == 5}" @click="chooseNav(5)">
                <view>已结佣</view>
                <view>（{{ count.count5 }}）</view>
            </view>
            <view class="nav-i" :class="{navActive : type == 6}" @click="chooseNav(6)">
                <view>退户</view>
                <view>（{{ count.count6 }}）</view>
            </view>
        </view> -->
        
        <view class="header" v-if="isShow">
            <scroll-view scroll-x>
                <view class="nav">
                    <!-- examine 1审核中 2通过 3驳回 4无效 -->
                    <view class="nav-i" :class="{navActive : type == 1 && examine == 1}" @click="chooseNav(1, 1)">
                        <view>待审核</view>
                        <view>（{{ count.count11 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 1 && examine == 2}" @click="chooseNav(1, 2)">
                        <view>报备有效</view>
                        <view>（{{ count.count12 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 2}" @click="chooseNav(2)">
                        <view>到访</view>
                        <view>（{{ count.count2 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 3}" @click="chooseNav(3)">
                        <view>认购</view>
                        <view>（{{ count.count3 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 4}" @click="chooseNav(4)">
                        <view>待结佣</view>
                        <view>（{{ count.count4 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 5}" @click="chooseNav(5)">
                        <view>已结佣</view>
                        <view>（{{ count.count5 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 6}" @click="chooseNav(6)">
                        <view>退户</view>
                        <view>（{{ count.count6 }}）</view>
                    </view>
                    
                    <view class="nav-i" :class="{navActive : type == 1 && examine == 3}" @click="chooseNav(1, 3)">
                        <view>报备无效</view>
                        <view>（{{ count.count13 }}）</view>
                    </view>
                </view>
            </scroll-view>
        </view>
        
        
        
        
        
        <view class="search" v-if="isShow">
            <u-search bg-color="#fff" :show-action="false" v-model="keyword" shape="round" placeholder="请输入" @search="doSearch"></u-search>
        </view>
        <view class="wrapper" v-if="isShow">
            <view class="item" v-for="(item, index) in list" :key="index">
                <!-- examine 1待审核 2通过 3驳回 4过期 -->
                <template v-if="type != 5 && type != 6">
                    <view class="baobei" v-if="item.examine == 1">待审核</view>
                    <view class="baobei2" v-if="item.examine == 2">有效（已通过）</view>
                    <view class="baobei" v-if="item.examine == 3">无效</view>
                    <view class="baobei" v-if="item.examine == 4">已过期</view>
                </template>
                <view class="item-l">
                    <view>客户姓名：</view>
                    <view class="u-flex-1">{{item.name}}</view>
                </view>
                <view class="item-l">
                    <view>客户性别：</view>
                    <view class="u-flex-1">{{item.gender == 1 ? '男' : '女'}}</view>
                </view>
                <view class="item-l">
                    <view>手机号：</view>
                    <view class="u-flex-1">{{item.phone}}</view>
                    <!-- <view class="u-flex-1">{{ item.phone.substring(0, 3)+"****"+item.phone.substr(7-4) }}</view> -->
                </view>
                <view class="item-l" v-if="item.id_number">
                    <view>身份证号：</view>
                    <view class="u-flex-1">{{item.id_number}}</view>
                </view>
                <view class="item-l">
                    <view>楼盘名称：</view>
                    <view class="u-flex-1">{{item.pro_name}}</view>
                </view>
                
                <template v-if="type == 1 || type == 2 || type == 3">
                    <view class="item-l">
                        <view>报备时间：</view>
                        <view class="u-flex-1">{{item.report_time}}</view>
                    </view>
                    <view class="item-l" v-if="item.e_report_time">
                        <view>审核通过时间：</view>
                        <view class="u-flex-1">{{item.e_report_time}}</view>
                    </view>
                    <view class="item-l">
                        <view>项目驻场：</view>
                        <view class="u-flex-1">{{item.resident_name}}</view>
                    </view>
                </template>
                
                <template v-if="type == 4 || type == 5 || type == 6">
                    <view class="item-l">
                        <view>报备人员：</view>
                        <view class="u-flex-1">{{item.broker_name}}</view>
                    </view>
                    <view class="item-l">
                        <view>所属门店：</view>
                        <view class="u-flex-1">新发地产</view>
                    </view>
                    <view class="item-l">
                        <view>所属公司：</view>
                        <view class="u-flex-1">长春市科技代理有限公司</view>
                    </view>
                    <view class="item-l">
                        <view>运维经理：</view>
                        <view class="u-flex-1">马先生</view>
                    </view>
                    <view class="item-l">
                        <view>联系电话：</view>
                        <view class="u-flex-1">18911223344</view>
                    </view>
                </template>
                
                <template v-if="type == 4 || type == 5">
                    <view class="item-l">
                        <view>到访时间：</view>
                        <view class="u-flex-1">{{item.visit_time}}</view>
                    </view>
                    <view class="item-l">
                        <view>认购时间：</view>
                        <view class="u-flex-1">{{item.buy_time}}</view>
                    </view>
                </template>
                
                <view class="fail-text" v-if="type == 1 && item.reason">
                    无效原因：{{item.reason}}
                </view>
                <view class="btns">
                    <view class="wl-btn" v-if="type == 1 || type == 2 || type == 3" @click.stop="toChat(item)">微聊驻场</view>
                    <view class="lx-btn" v-if="type == 1 || type == 2 || type == 3" @click.stop="doCall(item)">联系驻场</view>
                    <view class="ck-btn" v-if="(item.examine != 1 && type == 1) || type != 1" @click="toPage(item, type)">查看详情</view>
                </view>
            </view>
        </view>
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#29b0ed" :border-top="false" height="120" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusBar: 0,
            background: { backgroundColor: 'rgba(255,255,255,0)' },
            current: 0, //底部导航索引
            tab_list: [
                {
                    iconPath: "/static/icon/tab_01.png",
                    selectedIconPath: "/static/icon/tab_01.png",
                    text: '',
                    pagePath: "/pages/tabbar/index",
                    customIcon: false
                },{
                    iconPath: "/static/icon/tab_03.png",
                    selectedIconPath: "/static/icon/tab_02.png",
                    text: '客户',
                    customIcon: false,
                    pagePath: "/pages/tabbar/kehu"
                },{
                    iconPath: "/static/icon/tab_05.png",
                    selectedIconPath: "/static/icon/tab_04.png",
                    text: '消息',
                    customIcon: false,
                    pagePath: "/pages/tabbar/news"
                },{
                    iconPath: "/static/icon/tab_07.png",
                    selectedIconPath: "/static/icon/tab_06.png",
                    text: '微聊',
                    customIcon: false,
                    pagePath: "/pages/tabbar/wechat"
                },{
                    iconPath: "/static/icon/tab_09.png",
                    selectedIconPath: "/static/icon/tab_08.png",
                    text: '我的',
                    customIcon: false,
                    pagePath: "/pages/tabbar/mine"
                }
            ],
            type: 1,
            status: 'loadmore', //是否显示没有更多了
            page: 1,
            list: [],
            keyword: '',
            count: {},
            isShow: false,
            examine: 1,
        };
    },
    onLoad() {
        let _this = this;
        //状态栏高度
        uni.getSystemInfo({
        	success: function(res) {
        		_this.statusBar = res.statusBarHeight;
        	}
        });
        if (this.$getSync('userToken')) {
            this.getList();
        }
        uni.$on('KEHU', () => {
            this.page = 1;
            this.list = [];
            this.status = 'loadmore';
            this.getList();
        })
    },
    onShow() {
        if (!this.$getSync('userToken')) {
            uni.showModal({
            	title: '温馨提示',
            	content: '去登录？',
            	success: (res) => {
            		if (res.confirm) {
            			this.$gTo('/pages/login/login')
            		} else if (res.cancel) {
            			this.$sTo('/pages/tabbar/index')
            		}
            	}
            });
        }
    },
    
    onPullDownRefresh() {
        var _this = this
        _this.status = 'loadmore';
        _this.page = 1;
        _this.list = [];
        _this.getList();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
    	if(this.page == 1){return}
    	this.getList()
    },
    methods: {
        doCall(item) {
            uni.makePhoneCall({
                phoneNumber: item.resident_phone
            });
            // this.$call(item.resident_phone)
        },
        
        // 微聊
        toChat(item) {
            this.$gTo('/pages/chat/chat-details?data=' + JSON.stringify(item) + '&type=1')
        },
        
        // 搜索
        doSearch() {
            this.page = 1
            this.list = []
            this.status = 'loadmore'
            this.getList()
        },
        
        // chooseNav(num) {
        //     if (this.type == num) return
        //     this.type = num
        //     this.doSearch()
        // },
        
        chooseNav(num, examine) {
            if (!examine) {
                if (this.type == num) return
            } else {
                if (this.type == num && this.examine == examine) return
            }
            this.type = num
            this.examine = examine
            this.doSearch()
        },
        
        toPage(item, type) {
            if (type == 1 || type == 2) {
                this.$gTo('/pages/kehu/details-1?type='+type + '&id=' + item.id)
            } else if (type == 3 || type == 4 || type == 5 || type == 6) {
                this.$gTo('/pages/kehu/details-3?type='+type + '&id=' + item.id)
            }
        },
        
        getList() {
        	if (this.status == 'nomore') return;
        	this.status = 'loading';
        	this.$ajax('reporting_list', {
        		user_token: this.$getSync('userToken'),
        		page: this.page,
        		limit: 10,
                type: 1,//1客户报备 2项目报备 3待审核 4已审核
                status: this.type,//1报备 2到访 3认购 4待结佣 5已结佣 6退户 7认证
                name: this.keyword,//搜索
                examine: this.examine,// 1审核中 2通过 3驳回 4无效
        	}).then(ret => {
        		if (ret.success == 1000) {
                    this.count = ret.detail
        			if (ret.detail && ret.detail.data && ret.detail.data.length > 0) {
        				this.list = this.list.concat(ret.detail.data);
        				this.page++;
        				this.status = 'loadmore'
        			} else {
        				this.status = 'nomore'
        			}
                    this.isShow = true
        		} else {
        			this.$toast(ret.msg);
        		}
        	});
        },
        
        //切换底部导航
        tabbarChange(e) {
        	this.current = e;
        },
        
        onPageScroll: function(e) {
        	//nvue暂不支持滚动监听，可用bindingx代替
        	// console.log("滚动距离为：" + e.scrollTop);
        	let a = e.scrollTop * 0.05;
        	if (a > 1) {
        		a = 1;
        	}
        	if (e.scrollTop == 0) {
        		this.background.backgroundColor = 'rgba(49,153,245,0)';
        	} else {
        		this.background.backgroundColor = 'rgba(49,153,245,' + a + ')';
        	}
        },
    }
};
</script>

<style>
    .u-tabbar__content__item .u-icon__img {
    	width: 50rpx !important;
    	height: 50rpx !important;
    }
    .u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img{
        width: 100rpx !important;
        height: 100rpx !important;
        margin-top: -20rpx;
    }
</style>

<style lang="scss">
    .search{
        // background-color: #f5f5f5;
        padding: 0 20rpx 20rpx;
    }
    
    
    page{
        background-color: #f5f5f5;
        border-top: 2rpx solid #e6e6e6;
    }
    .header{
        width: 750rpx;
        white-space: nowrap;
        margin-bottom: 20rpx;
        background-color: #fff;
    }
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        margin-bottom: 20rpx;
    }
    .nav-i{
        // width: calc(100vw / 6);
        padding: 25rpx 28rpx;
        font-size: 26rpx;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .navActive{
        font-size: 28rpx;
        color: #00a1e9;
        font-weight: bold;
        border-bottom: 2rpx solid #00a1e9;
    }
    
    .wrapper{
        padding: 0 20rpx 50rpx;
    }
    .item{
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        padding: 30rpx;
    }
    .baobei{
        font-size: 28rpx;
        color: #fe6155;
        text-align: right;
        padding-bottom: 5rpx;
    }
    .baobei2{
        font-size: 28rpx;
        color: #2fef11;
        text-align: right;
        padding-bottom: 5rpx;
    }
    .item-l{
        font-size: 24rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .fail-text{
        background-color: #f5f5f5;
        padding: 20rpx;
        font-size: 24rpx;
        word-break: break-all;
        white-space: pre-line;
        margin-bottom: 20rpx;
        margin-top: 10rpx;
    }
    .btns{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .btns>view{
        font-size: 26rpx;
        line-height: 1;
        padding: 15rpx 25rpx;
        border-radius: 50rpx;
        margin-left: 15rpx;
        box-sizing: border-box;
    }
    .wl-btn{
        color: #00a1e9;
        background-color: #fff;
        border: 2rpx solid #00a1e9;
    }
    .lx-btn{
        color: #fff;
        background-color: #00a1e9;
    }
    .ck-btn{
        background-color: #f0f0f0;
    }
    
    
</style>
